<template>
	<view class="verification_code" >
		<view class="verification_code_continor">
			<text
				v-for="(item, index) in latticeNum"
				:key="index"
				:style="inputValues.length === index || (inputValues.length === latticeNum && index === latticeNum - 1) ? borderCheckStyle : borderStyle"
			>
				<block v-if="inputValues[index]">{{ inputValues[index] }}</block>
			</text>
		</view>
		<input :type="inputType" focus :maxlength="latticeNum" class="input_info" @input="inputVal" />
	</view>
</template>

<script>
export default {
	props: {
		// 输入框框框的个数
		latticeNum: {
			type: Number,
			default: 4
		},
		// 未选中样式
		borderStyle: {
			type: String,
			default: 'border-bottom:1px solid gray;'
		},
		// 选中的样式
		borderCheckStyle: {
			type: String,
			default: 'border:1px solid rgb(117, 202, 104);'
		},
		// input类型
		inputType:{
			type:String,
			default:"number"
		}
	},
	data() {
		return {
			inputValues: [], //输入的值
		};
	},
	methods: {
		inputVal(e) {
			this.inputValues = e.detail.value;
			this.$emit('getInputVerification', this.inputValues);
		}
	}
};
</script>

<style lang="less">
.verification_code {
	// width: 260upx;
	// margin: 20upx auto;
	position: relative;
	overflow: hidden;
	.verification_code_continor {
		display: flex;
		text-align: center;
		text {
			width: 60upx;
			height: 60upx;
      line-height: 60upx;
		}
		text:not(:first-child) {
			margin-left: 20upx;
		}
	}
	.input_info {
		width: 1200upx;
		height: 60upx;
		// font-size: 0px;
		border: 1px solid red;
		position: absolute;
		opacity: 0;
		top: 0;
		left: -700upx;
	}
}
</style>
